<template>
   
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
          style="float: right"
          type="primary"
          @click="handleSearchList()"
          size="small"
        >
          查询搜索
        </el-button>
        <el-button
          style="float: right; margin-right: 15px"
          @click="handleResetSearch()"
          size="small"
        >
          重置
        </el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form
          :inline="true"
          :model="listQuery"
          size="small"
          label-width="140px"
        >
          <el-form-item label="题解标题：">
            <el-input
              v-model="listQuery.keyword"
              class="input-width"
              placeholder="标题"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
      <el-button
        size="mini"
        class="btn-add"
        @click="handleAdd()"
        style="margin-left: 20px"
        >添加题解</el-button
      >
    </el-card>
    <div class="table-container">
      <el-table
        ref="solutionTable"
        :data="list"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        v-loading="listLoading"
        border
      >
        <el-table-column
          type="selection"
          width="60"
          align="center"
        ></el-table-column>
        <el-table-column label="编号" width="120" align="center">
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column label="标题" align="center">
          <template slot-scope="scope">{{ scope.row.solutionTitle }}</template>
        </el-table-column>
        <el-table-column label="标签" align="center">
          <template slot-scope="scope">{{ scope.row.solutionTag }}</template>
        </el-table-column>
        <el-table-column label="更新时间" align="center">
          <template slot-scope="scope">{{
            scope.row.updateTime | formatDate
          }}</template>
        </el-table-column>
        <el-table-column label="上传用户" align="center">
          <template slot-scope="scope">{{ scope.row.belongUsername }}</template>
        </el-table-column>
        <el-table-column label="访问量" align="center">
          <template slot-scope="scope">{{ scope.row.solutionNumber }}</template>
        </el-table-column>
        <el-table-column label="启用" width="200" align="center">
          <template slot-scope="scope">
            <el-switch
              @change="handleStatusChange(scope.$index, scope.row)"
              :active-value="1"
              :inactive-value="0"
              v-model="scope.row.solutionStatus"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleUpdate(scope.$index, scope.row)"
              >编辑
            </el-button>
            <el-button
              size="mini"
              type="text"
              @click="handleLookSolution(scope.$index, scope.row)"
              >查看
            </el-button>
            <el-button
              size="mini"
              type="text"
              @click="handleDelete(scope.$index, scope.row)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="listQuery.pageSize"
        :page-sizes="[5, 10, 15]"
        :current-page.sync="listQuery.pageNum"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      :title="isEdit ? '编辑题解' : '添加题解'"
      :visible.sync="dialogVisibleAdd"
      width="79%"
    >
      <el-form
        :model="solutionDataForm"
        ref="subjectForm"
        label-width="5%"
        size="small"
      >
        <el-form-item label="标题：">
          <el-input
            v-model="solutionDataForm.solutionTitle"
            style="width: 100%"
          ></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="8">
            <el-form-item label-width="15%" label="标签：">
              <el-input
                v-model="solutionDataForm.solutionTag"
                style="width: 300px"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="启用">
              <el-radio-group v-model="solutionDataForm.solutionStatus">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="解法：">
          <mavon-editor
          class="mavon-editor-dicsuss"
          :imagelink="false"
          v-model="solutionDataForm.solutionContext"
          ref="md"
          @imgAdd="imgAdd"
          @imgDel="imgDel"
        />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="handleDialogConfirm()" size="small"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog title="查看算法" :visible.sync="dialogVisibleLook" width="40%">
      <mavon-editor
        style="z-index: 1;height:150px"
        class="md"
        :value="solutionContext"
        :subfield="false"
        :defaultOpen="'preview'"
        :toolbarsFlag="false"
        :editable="false"
        :scrollStyle="true"
        :ishljs="true"
      />
    </el-dialog>
  </div>
</template>
<script>
import {
  fetchList,
  updateStatus,
  deleteSolution,
  createSolution,
  updateSolution,
} from "@/api/solution";

import { formatDate } from "@/utils/date";

const defaultListQuery = {
  pageNum: 1,
  pageSize: 5,
  keyword: null,
  subjectId: null,
};
const defaultSolution = {
  id: null,
  solutionTitle: null,
  solutionContext: null,
  createTime: null,
  updateTime: null,
  solutionStatus: 1,
  solutionTag: null,
  solutionNumber: 0,
  belongUsername: null,
  userId: null,
  subjectId: null,
};
export default {
  name: "solutionList",
  data() {
    return {
      listQuery: Object.assign({}, defaultListQuery),
      list: null,
      total: null,
      listLoading: false,
      dialogVisibleAdd: false,
      dialogVisibleLook: false,
      solutionDataForm: Object.assign({}, defaultSolution),
      isEdit: false,
      solutionContext: null,
    };
  },
  created() {
    this.getList();
  },
  filters: {
    formatDate(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd");
    },
  },
  methods: {
    handleResetSearch() {
      this.listQuery = Object.assign({}, defaultListQuery);
    },
    handleSearchList() {
      this.listQuery.pageNum = 1;
      this.getList();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    imgAdd(pos, $file) {
      let formdata = new FormData();
      formdata.append("file", $file);
      this.$axios({
        url: "/file/upload",
        method: "post",
        data: formdata,
        headers: {
          "Content-Type": "multipart/form-data;charset=UTF-8",
          aaa: "aaa",
        },
      }).then((url) => {
        // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
        //    this.$vm.$img2Url(pos, url.data);
        this.$refs.md.$img2Url(pos, url.data);
      });
    },
    imgDel(pos) {
      delete this.imgFile[pos];
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
    handleDelete(index, row) {
      console.log(row.id);
      this.handleDeleteById(row.id);
    },
    handleAdd() {
      this.dialogVisibleAdd = true;
      this.isEdit = false;
      this.solutionDataForm = Object.assign({}, defaultSolution);
    },
    handleUpdate(index, row) {
      this.dialogVisibleAdd = true;
      this.isEdit = true;
      this.solutionDataForm = Object.assign({}, row);
    },
    handleLookSolution(index, row) {
      this.solutionContext = row.solutionContext;
      this.dialogVisibleLook = true;
    },
    handleDialogConfirm() {
      this.$confirm("是否要确认?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if (this.isEdit) {
          updateSolution(
            this.solutionDataForm.id,
            this.$route.query.subjectId,
            this.solutionDataForm
          ).then((response) => {
            this.$message({
              message: "修改成功！",
              type: "success",
            });
            this.dialogVisibleAdd = false;
            this.getList();
          });
        } else {
          this.solutionDataForm.userId = this.$store.state.user.userInfo.id;
          this.solutionDataForm.subjectId = this.$route.query.subjectId;
          createSolution(this.solutionDataForm).then((response) => {
            if (response.code == 200) {
              this.$message({
                message: "添加成功！",
                type: "success",
              });
            } else {
              this.$message({
                message: "添加失败！",
                type: "error",
              });
            }
            this.dialogVisibleAdd = false;
            this.getList();
          });
        }
      });
    },
    getList() {
      this.listLoading = true;
      this.listQuery.subjectId = this.$route.query.subjectId;
      fetchList(this.listQuery).then((response) => {
        this.listLoading = false;
        this.list = response.data.list;
        this.total = response.data.total;
      });
    },
    handleStatusChange(index, row) {
      this.$confirm("是否要修改该状态?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          updateStatus(row.id, {
            status: row.solutionStatus,
            subjectId: this.$route.query.subjectId,
          }).then((response) => {
            if (response.code == 200) {
              this.$message({
                type: "success",
                message: "修改成功!",
              });
            } else {
              this.$message({
                type: "error",
                message: "修改失败!",
              });
            }
            this.getList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消修改",
          });
          this.getList();
        });
    },
    handleDeleteById(id) {
      this.$confirm("是否要删除该题解?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteSolution(id).then((response) => {
          this.getList();
          if (response.code == 200) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          } else {
            this.$message({
              type: "error",
              message: "删除失败!",
            });
          }
        });
      });
    },
  },
};
</script>
<style>
.mavon-editor-dicsuss{
  width: 100% !important;
  height: 110px !important; 
}
</style>


